<template>
    <div class="container">
      <h1>根据分数查询电影</h1>
      <form @submit.prevent="fetchMoviesByScore">
        <div class="form-group">
          <label for="score">输入分数:</label>
          <input
            type="number"
            class="form-control"
            id="score"
            v-model="score"
            step="0.1"
            min="0"
            max="10"
            required
          />
        </div>
        <button type="submit" class="btn btn-primary">查询</button>
      </form>
  
      <!-- 显示电影列表 -->
      <div v-if="movies.length > 0" class="mt-4">
        <h2>分数为 {{ score }} 的电影:</h2>
        <ul class="list-group">
          <li v-for="movie in movies" :key="movie.URL" class="list-group-item">
            <strong>{{ movie.TITLE }}</strong><br />
            <strong>评分:</strong> {{ movie.SCORE }}<br />
            <strong>票房:</strong> {{ formatBoxOffice(movie.BOXOFFICE) }}<br />
            <strong>封面链接:</strong> <a :href="movie.COVER_URL" target="_blank">{{ movie.COVER_URL }}</a><br />
            <strong>详情链接:</strong> <a :href="movie.URL" target="_blank">{{ movie.URL }}</a>
          </li>
        </ul>
      </div>
  
      <!-- 如果没有电影 -->
      <div v-if="movies.length === 0 && !error" class="mt-4">
        <p>没有找到分数为 {{ score }} 的电影。</p>
      </div>
  
      <!-- 错误提示 -->
      <div v-if="error" class="alert alert-danger mt-4">
        {{ error }}
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        score: '', // 用户输入的分数
        movies: [], // 存储电影列表
        error: '', // 错误信息
      };
    },
    methods: {
      async fetchMoviesByScore() {
        try {
          const response = await axios.get('http://127.0.0.1:8000/api/score_n', {
            params: {
              n: this.score, // 将分数作为查询参数
            },
          });
  
          // 检查 API 响应
          if (response.data.code === 0) {
            if (response.data.data.length > 0) {
              // 如果 data 不为空，提取电影信息
              this.movies = response.data.data;
              this.error = '';
            } else {
              // 如果 data 为空，提示未找到电影
              this.movies = [];
              this.error = '';
            }
          } else {
            // 如果 code 不为 0，提示获取失败
            this.movies = [];
            this.error = response.data.msg || '获取电影数据失败，请稍后重试。';
          }
        } catch (err) {
          // 捕获请求错误
          this.movies = [];
          this.error = '请求失败，请检查网络连接或稍后重试。';
        }
      },
      // 格式化票房数据
      formatBoxOffice(boxOffice) {
        if (boxOffice >= 100000000) {
          return (boxOffice / 100000000).toFixed(2) + ' 亿';
        } else if (boxOffice >= 10000) {
          return (boxOffice / 10000).toFixed(2) + ' 万';
        } else {
          return boxOffice;
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .list-group-item {
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .alert {
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
  }
  
  .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
  }
  
  a {
    color: #007bff;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  </style>